<template>
	<div class="realTimeAdSlotData">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'>
				<i class="icon iconfont">&#xe7d8;</i>
				当前位置 / 市场数据分析 / <span>{{title}}</span>
			</div>
		</div>
		<div class="choose_dialog fadeInDown animated">
			<div class="block">
				<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
					<el-form-item label="查看日期：" :label-width="formLabelWidth">
						<el-date-picker
						v-model="ruleForm.date"
						align="left"
						placeholder="选择日期"
						@change='dateChange' 
						:picker-options="pickerOptions">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="代理商：" :label-width="formLabelWidth"  prop="agent">
						<el-select multiple v-model="ruleForm.agent" filterable  placeholder="请选择代理商" @change="agentChange">
							<el-option v-for="(val,key) in agents" :label="val.agentName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="平台：" :label-width="formLabelWidth"  prop="platForm">
						<el-select multiple v-model="ruleForm.platForm" filterable  placeholder="请选择平台" @change="platFormChange">
							<el-option v-for="(val,key) in platForms" :label="val.platFormName" :value="val.id" :key='key'></el-option>
						</el-select>
					</el-form-item>
					<el-form-item  class='conmit'>
						<el-button type="primary"  icon="search" @click="search()" :disabled="searchable">查询</el-button>
		    		</el-form-item>
		    		<span class="warning">（输入搜索条件，留空搜索全部！）</span>
				</el-form>
			</div>
		</div>
		<div class="right_content">
		    <div class="realTimeAdSlotDataTable"  style='margin-bottom:40px;'>
				<div class="realTimeAdSlotDataTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						实时对比数据
					</span>
				</div>
				<div class="buttons">
					<el-button type="primary" :disabled="searchable" @click="navChange(0)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					激活设备 <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "0"'></i>
					</el-button>
					<el-button type="primary" :disabled="searchable" @click="navChange(1)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					新增设备 <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "1"'></i>
					</el-button>
					<el-button type="primary" :disabled="searchable" @click="navChange(2)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					新增账号 <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "2"'></i>
					</el-button>
					<el-button type="primary" :disabled="searchable" @click="navChange(3)" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
					新增付费 <i style='color: #fff;' class='el-icon-check' v-show='activeIndex == "3"'></i>
					</el-button>
				</div>
				<div id="tbecharts" class="tbecharts"></div>
			</div>
			<div class="realTimeAdSlotDataTable"  style='margin-bottom:40px;'>
				<div class="realTimeAdSlotDataTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						小时数据
					</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel(1,'广告位数据-小时数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="realTimeAdSlotDataTableBody fadeIn animated">
					<template>
					  <el-table
						v-loading="loading"
						element-loading-text="拼命加载中"
					    :data="hoursData"
					    border
					    :default-sort = "{prop: 'channelid', order: 'descending'}"
						@sort-change='sortChange'
					    >
					     <el-table-column sortable align="center"
					        v-for="(col,key) in hoursHead"
					        :prop="col.prop" :label="col.label" :key='key'>
					    </el-table-column>
					  </el-table>
					</template>
					<div class="pages realTimeAdSlotDataPage">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="pageSizes"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
            <div class="realTimeAdSlotDataTable"  style='margin-bottom:40px;'>
				<div class="realTimeAdSlotDataTableHeader" :style='{"background":this.$store.getters.theme[5]}'>
					<span :style='{"color":this.$store.getters.theme[6]}' class="zoomIn animated">
						实时详细数据（15分钟统计一次）
					</span>
					<el-button type="primary" size="mini" class="excel"  @click="excel(2,'广告位数据-实时详细数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="block">
					<el-form  class="demo-form-inline" :inline="true" :model="ruleForm">
						<el-form-item label="广告url：" :label-width="formLabelWidth"  prop="adUrl">
							<el-select multiple v-model="ruleForm.adUrl" filterable  placeholder="请选择广告url" @change="adUrlChange">
								<el-option v-for="(val,key) in adUrls" :label="val.adUrlName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="归属：" :label-width="formLabelWidth"  prop="attr">
							<el-select multiple v-model="ruleForm.attr" filterable  placeholder="请选择归属" @change="attrChange">
								<el-option v-for="(val,key) in attrs" :label="val.attrName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="渠道名称：" :label-width="formLabelWidth"  prop="channel">
							<el-select multiple v-model="ruleForm.channel" filterable  placeholder="请选择渠道名称" @change="channelChange">
								<el-option v-for="(val,key) in channels" :label="val.channelName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="结算方式：" :label-width="formLabelWidth"  prop="settlWay">
							<el-select multiple v-model="ruleForm.settlWay" filterable  placeholder="请选择结算方式" @change="settlWayChange">
								<el-option v-for="(val,key) in settlWays" :label="val.settlWayName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="广告位置：" :label-width="formLabelWidth"  prop="adPlace">
							<el-select multiple v-model="ruleForm.adPlace" filterable  placeholder="请选择广告位置" @change="adPlaceChange">
								<el-option v-for="(val,key) in adPlaces" :label="val.adPlaceName" :value="val.id" :key='key'></el-option>
							</el-select>
						</el-form-item>
						<el-form-item  class='conmit'>
							<el-button type="primary"  icon="search" @click="gjSearch()" :disabled="searchable">高级查询</el-button>
			    		</el-form-item>
					</el-form>
				</div>
				<div class="realTimeAdSlotDataTableBody fadeIn animated">
					<template>
					  <el-table
						v-loading="loading"
						element-loading-text="拼命加载中"
					    :data="realTmData"
					    border
					    :default-sort = "{prop: 'channelid', order: 'descending'}"
						@sort-change='sortChange2'
					    >
					     <el-table-column sortable align="center"
					        v-for="(col,key) in realTmHead"
					        :prop="col.prop" :label="col.label" :key='key'>
					    </el-table-column>
					  </el-table>
					</template>
					<div class="pages realTimeAdSlotDataPage">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="currentPage2"
							:page-sizes="pageSizes2"
							:page-size="pageSize2"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal2">
						</el-pagination>
					</div>
				</div>
			</div>

		</div>
		<a href="" :download="xlsx" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./realTimeAdSlotData.styl"></style>
<script src="./realTimeAdSlotData.js"></script>
